<template>
  <div class="setting">
    <van-nav-bar title="设置" @click-left="routerBack()" left-arrow> </van-nav-bar>
    <div class="userinfo"></div>
    <van-cell-group inset title=" ">
      <van-cell title="头像" @click="doUpload" is-link>
        <template #value>
          <img class="small-img" alt="" :src="userinfo.headImg" />
        </template>
      </van-cell>
      <van-cell @click="showPopup('昵称', 'username')" title="昵称" is-link>{{
        userinfo.username
      }}</van-cell>
      <van-cell
        @click="showPopup('个人简介', 'userDescriptions')"
        title="个人简介"
        is-link
        >{{ userinfo.userDescriptions }}</van-cell
      >
      <van-cell @click="showPopup('密码', 'password')" title="密码" is-link></van-cell>
    </van-cell-group>
    <van-cell-group inset title=" ">
      <van-cell title="实名认证" value="未认证" />
      <van-cell title="账户安全" />
      <van-cell title="学生认证" />
      <van-cell title="支付设置" />
    </van-cell-group>

    <van-cell-group inset title=" ">
      <van-cell title="系统设置" />
      <van-cell title="关于" />
      <van-cell title="应用权限" />
    </van-cell-group>
    <van-cell-group inset title=" ">
      <van-cell title="退出登录" @click="logout" is-link />
    </van-cell-group>
    <van-uploader
      style="display: none"
      :after-read="afterRead"
      :max-count="1"
      ref="headUpload"
    />
    <van-popup v-model:show="popshow">
      <Popup :title="popTitle" :changeItem="changeItem" />
    </van-popup>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { upload } from "@/api/interface";
import { useStore } from "vuex";
import Popup from "./components/Popup.vue";
import { VueCropper } from "vue-cropper";

export default {
  components: { Popup, VueCropper },
  setup() {
    const router = useRouter();
    const state = reactive({
      userinfo: {},
      popshow: false,
      popTitle: "",
      changeItem: "",
    });
    const headUpload = ref(null);
    const store = useStore();
    onBeforeMount(async () => {
      await store.dispatch("_getUserInfo");
      state.userinfo = store.state.userinfo;
    });
    const doUpload = () => {
      headUpload.value.chooseFile();
    };
    const showPopup = (popTitle, changeItem) => {
      state.popshow = true;
      state.popTitle = popTitle;
      state.changeItem = changeItem;
    };
    const routerBack = () => {
      router.go(-1);
    };
    const logout = async () => {
      localStorage.setItem("token", "");
      sessionStorage.setItem("token", "");
      window.location.href = "/";
    };
    const afterRead = async (file) => {
      // console.log(file);
      // 此时可以自行将文件上传至服务器
      let formData = new FormData();
      formData.append("file", file.file);
      let resultUrl = "";
      await upload(formData).then((res) => {
        resultUrl = res.data[0];
        state.userinfo.headImg = resultUrl;
      });
      await store.dispatch("_updateUserInfo", {
        changesItemName: "headImg",
        data: resultUrl,
      });
    };
    const onUpload = (e) => {
      state.option.img = "";
      let that = this;
      let file = e.target.files[0];
      state.filename = e.target.files[0].name;
      let reader = new FileReader();
      reader.onload = (e) => {
        if (typeof e.target.result === "object") {
          state.option.img = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          state.option.img = e.target.result;
        }
      };
      reader.readAsDataURL(file);
    };
    const sureimg = () => {
      state.$refs.cropper.getCropBlob((data) => {
        let that = this;
        that.option.img = "";
        let files = new window.File([data], state.filename, {
          type: data.type,
        });
        let param = new FormData();
        param.append("img", files);
        param.append("size", files.size);
        for (let n in that.params) {
          param.append(n, that.params[n]);
        }
        that.personalData(param); //上传服务器
      });
    };
    return {
      ...toRefs(state),
      routerBack,
      logout,
      afterRead,
      doUpload,
      headUpload,
      showPopup,
      onUpload,
      sureimg,
    };
  },
};
</script>
<style lang="less" scoped>
.setting {
  overflow: scorll;
}
.popup {
  width: 100vw;
}
.small-img {
  width: 25px;
  height: 25px;
  border-radius: 50px;
}
</style>
